<!DOCTYPE html>
<html>
	<head>
		<!-- 页面的编码集 gbk gb2312 国际化编码 utf-8-->
		<meta charset="utf-8" />
		<title>淘宝在线客服</title>
			
		<style type="text/css">
			/*CSS 标签样式的写法, 直接写标签名  */
			body{
				background:url(img/1.jpg) no-repeat;
				background-size: cover;
			}
			/* CSS 的第二种指定方法 类 class="box" .box{}*/
			.box{
				width: 600px;
			    height: 500px;
			    background: #fff;
			    margin: 35px auto;
			    box-shadow: 0px 0px 5px 0px #000;
			    border-radius: 10px;
			    display: none;
			}
			.header{
				height: 60px;
			    background: #0066ff;
			    border-radius: 10px;
			    position: relative;
			}
			.header .logo{
				width: 400px;
			    height: 88px;
			    position: absolute;
			    bottom: 0px;
			}
			.header .hide{
				width: 32px;
			    height: 32px;
			    border: 1px solid #fff;
			    font-size: 25px;
			    float: right;
			    text-align: center;
			    line-height: 35px;
			    border-radius: 50%;
			    color: #fff;
			    box-shadow: 0px 0px 5px #000;
			    margin: 10px;
			    cursor: pointer;
			}
			/*鼠标移动到上面变大的效果*/
			.header .hide:hover{
				width: 35px;
			    height: 35px;
			    font-size: 30px;
			    line-height: 40px;
			}
			.center{
				height: 340px;
    			background: #fff;
    			padding: 10px;
    			overflow: auto;
			}
			.center .right{
				width: 100%;
			    float: right;
			    text-align: right;
			}
			.center .left{
				width: 100%;
				color: #00ff00;
			}
			.center .right img{
				border-radius: 50%;
			}
			.send{
				height: 80px;
			}
			/*指定id=sendContent 的元素样式*/
			#sendContent{
			 	width: 590px;
			    height: 35px;
			    border: none;
			    border-top: 1px solid #ddd;
			}
			.bottom{
				height: 15px;
  				cursor: pointer;	
			}
			.bottom span{
				text-decoration: underline;
				font: 15px/40px 微软雅黑;
			}
			button{
				float: right;
			    margin-right: 10px;
			    width: 100px;
			    height: 31px;
			    font-size: 19px;
			    background: green;
			    border-radius: 5px;
			    border: none;
			    color: #fff;
			    cursor: pointer;
			    box-shadow: 0px 0px 5px #000;
			}
		</style>
	</head>
	<body>
		<a href="javascript:void(0);" class="show">打开客服对话窗口</a> 
		<!-- 窗体面板 START -->
		<div class="box">
			<!-- 对话框的头部  START-->
			<div class="header">
				<div class="logo"><img src="img/logo.png"/></div>	
				<div class="hide">X</div>
			</div>
			<!-- 对话框的头部  END-->
			
			<!-- 聊天内容 START -->
			<div class="center"> 
				<div class='left'>
					<img width='50px' height='50px' src='img/jimi.png' />
					<span class='msg'>您好， 我是JiMi，有什么可以帮助您的吗</span>
				</div>
				<div class='right'>
					<span class='msg'>去，给我买一杯咖啡过来！！！！</span>
					<img width='50px' height='50px' src='img/jame.png' />
				</div>
			</div>
			<!-- 聊天内容 END -->
			
			<!-- 底部区域 START -->
			<div class="send"> 
				<input type="text" id="sendContent" placeholder="亲爱的顾客朋友，你有什么问题吗？？？"/>
				<div class="bottom">
					<span>满意度调查</span>
					<span>教我说说话吧</span>
					<button >发送</button>
				</div>
			</div>
			<!-- 底部区域 END -->
		</div>
        <!-- 窗体面板 END -->
		
		<!--引入JQuery 官方类库-->
		<script type="text/javascript" src="js/jquery-1.10.2.min.js"></script>
		<script type="text/javascript">
			$(function(){
				$(".show").click(function(){
					$(".box").toggle("slow");
					$(".show").toggle("slow");
				});
				$(".hide").click(function(){
					$(".box").toggle("slow");
					$(".show").toggle("slow");
				});
				$("button").click(function(){
					var content = $("#sendContent").val();
					var center = $(".center");
					var html = "<div class='right'><span class='msg'>"+content+"</span><img width='50px' height='50px' src='img/jame.png' /></div>";
					center.append(html);
					center.scrollTop(center[0].scrollHeight);
					$("#sendContent").val("");
					$.ajax({
					type:"get",
					url:"http://www.tuling123.com/openapi/api?key=44ab1d4a45054805b419127b7fa1074f&userid=180305$info="+content,
						success:function(result){
							var obj = result;
							var html = "<div class='left'><img width='50px' height='50px' src='img/jimi.png' /><span class='msg'>"+obj.text+"</span></div>";
							center.append(html);
							center.scrollTop(center[0].scrollHeight);
						},
					async:true
				});
				});
				
				
			});
			window.onkeydown = function(event){
				var key = event.keyCode;
				if (key == 13){
					$("button").click();
				}
			}
		</script>
	</body>
</html>
